import React from 'react'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== Lazy
const Button 	= $Lazy.load(()=>import('@antd/button'))
const Checkbox  = $Lazy.load(()=>import('@antd/form/checkbox'))
const Box 		= $Lazy.load(()=>import('#tp/box/box'))
const Image 	= $Lazy.load(()=>import('@tp/image'))
const message 	= $Lazy.file(()=>import('@antd/message'))
const Printer   = $Lazy.hook(()=>import('#private/printer'))
const Barcode 	= $Lazy.hook(()=>import('@views/_public/barcode'))
// ===================================================================== Temp
const Index = ({ data=[], loading, link, local }, ref) => {
	const [ rs, setRs ] = React.useState([])
	const [ rows, setRows ] = React.useState([])
	const [ all, setAll ] = React.useState()
	
	// 清空
	const onClear = React.useCallback(()=>{
		setRs([])
		setAll(false)
		setRows([])
	}, [])
	
	React.useEffect(()=>{
		onClear()
		setRs(data)
	}, [ data, onClear ])
	
	// 删除
	const onDel = React.useCallback((real = false)=>{
		const d = []	// 未选中的数据
		const id = []	// 已选中的条码
		rs.forEach( v =>{
			const { checked, code } = v
			if(checked){
				id.push(code)
			}else{
				d.push(v)
			}
		})
		
		if (real) {
			$http.submit(null,'barcode/delSpec', { param:{ id }, loadingText:'删除中' }).then(data=>{
				setRs(d)
				setAll(false)
				setRows([])
				message.then(f=>f.success('删除成功'))
			})
		} else {
			setRs(d)
			setAll(false)
			setRows([])
		}
	}, [rs])
	
	return (
		<>
			<header className='fxm plr10 mb10'>
				<Checkbox value={all} outer label='全选' disabled={rs.length === 0} onChange={ value => {
					setAll(value)
					rs.forEach(v=> v.checked = value )
					setRs(rs)
					setRows(value ? rs : [])
				}} />
				<div className='ml20 ex'>共<b className='c0 mlr5'>{rows.length}</b>条</div>
				<Button label='删除' ghost onClick={() => onDel(local ? false : true)} disabled={rows.length === 0} />
				<Button label='清空' ghost className='mlr10' disabled={rs.length === 0} onClick={onClear} />
				<Printer code={50103} label='打印' disabled={rows.length === 0} data={rows} link={link} click={onDel} />
			</header>
			<Box className='bcf ex' flex empty={rs} scroll first loading={loading}>
				<ul className='create-code-list fxw p15'>
					{
						$fn.hasArray(rs) && rs.map((v,i)=>(
							<li className='mb10 mr10' key={i}>
								<Checkbox value={v.checked} outer  onChange={ value=>{
									v.checked = value
									const rows = rs.filter( v => v.checked )
									setRows(rows)
									setAll( rows.length === rs.length && rs.length > 0 )
									setRs([...rs])
								}}>
									{local ? <Barcode value={v.code} /> : (<>
									<Image width={100} height={30} outer src={v.img}/></>)}
								</Checkbox>
								<div className='g6 h24' style={{marginLeft:30}}>{v.code}</div>
							</li>
						)) 
					}
				</ul>
			</Box>
			
		</>
	)
}
export default Index